"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/3
 */
import * as React from 'react'

const {View, ScrollView} = require('react-native');
const {connect} = require('react-redux');

const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");

const {createForm} = require('rc-form');
const {List, InputItem, DatePicker} = require('antd-mobile');

function formatDate(date: Date) {
    /* eslint no-confusing-arrow: 0 */
    const pad = n => n < 10 ? `0${n}` : n;
    const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
    const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
    return `${dateStr} ${timeStr}`;
}

import MyText from "../../component/MyText";
import NavBackButton from "../../component/BackButton";
import NavRightButton from "../../component/RightButton";
import Colors from "../../assets/styles/Colors";
import SearchBar from "../../component/SearchBar";
import Line from "../../component/Line";
import MyIcon from "../../component/icon";
import {PlacePage} from "../../interface/router";
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import {toastValidateError} from "../../utils/tools";

class GuestRegisterPage extends React.Component<PlacePage, any> {

    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            firstName: null,
            lastName: null,
            date: new Date(),
            dpValue: new Date(),
            visible: false,
            name: null
        };
    }

    textProps = {
        color: Colors.White,
        fontSize: 25,
        style: {marginBottom: 10}

    };
    /**
     * 选择联系人
     */
    onChooseContact = () => {
        Actions.selectContact({
            onSelect: (e) => {
                this.setState({
                    name: e.familyName + e.givenName + ' ' + e.company
                })
            }
        });

    };
    onTextFieldChange = (filed, value) => {
        let obj = {};
        obj[filed] = value;
        this.setState({...obj})
    };
    onRegister = () => {
        this.props.form.validateFields((errors, payload) => {
            if (errors) {
                toastValidateError(errors);
            } else {

                payload['email'] = this.props.auth.userInfo.email;
                payload['area'] = this.props.auth.selectArea.name;
                payload['_date'] = formatDate(payload['_date']);
                this.props.dispatch({type: 'place/registeGuest', payload});
            }
        });
    };

    render() {
        const {getFieldProps} = this.props.form;
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               rightButton={<NavRightButton onPress={this.onRegister}><MyText
                                   color={Colors.Active}>登记</MyText></NavRightButton>}
                               title={{title: '来宾登记', tintColor: '#fff'}}
                />
                <View style={{height: 50, backgroundColor: Colors.Primary, paddingVertical: 5}}>
                    <SearchBar rightButtonWidth={0}
                               leftIconName={'icon-ditu'}
                               editable={false}
                               onPress={Actions.search}/>
                </View>
                <View style={commonStyles.flex1}>
                    <ScrollView keyboardDismissMode={'on-drag'}>
                        <List>
                            <Line height={10} color={Colors.Background}/>

                            <List.Item extra={<MyText color={Colors.Active}>联系人</MyText>}
                                       onClick={this.onChooseContact}>
                                来宾信息
                            </List.Item>

                            <InputItem placeholder='姓名'
                                       clear
                                       {...getFieldProps('name', {
                                           initialValue: this.state.name,
                                           rules: [
                                               {required: true, message: '姓名未填写'},
                                           ]
                                       })}
                            />
                            <InputItem placeholder='来访目的'
                                       clear
                                       {...getFieldProps('desc', {
                                           rules: [
                                               {required: true, message: '来访目的未填写'},
                                           ]
                                       })}
                            />

                            <Line height={10} color={Colors.Background}/>

                            <List.Item>来宾到达</List.Item>


                            <List.Item
                                extra={this.state.dpValue && formatDate(this.state.dpValue)}
                                onClick={() => this.setState({visible: true})}
                            >
                                <MyIcon name={'icon-riqi'} color={'#000'} size={20}/>
                            </List.Item>

                            <DatePicker title="到达时间"
                                        visible={this.state.visible}
                                        minDate={new Date()}
                                        format={val => `${formatDate(val).split(' ')[1]}`}
                                        value={this.state.dpValue}
                                        onOk={date => this.setState({dpValue: date, visible: false})}
                                        onDismiss={() => this.setState({visible: false})}
                                        {...getFieldProps('_date', {
                                            initialValue: this.state.dpValue,
                                            rules: [
                                                {required: true, message: '来访时间'},
                                            ]
                                        })}
                            />
                        </List>
                    </ScrollView>
                </View>
            </View>
        );
    }
}

const Wrapper = createForm()(GuestRegisterPage);
export default connect(
    ({auth, place}) => ({auth, place})
)(Wrapper);

/*mode="date"
                            title="到达时间"
                            extra="Optional"
                            minDate={new Date()}
                            format={val => `${formatDate(val).split(' ')[1]}`}*/
/* {...getFieldProps('_date', {
                                rules: [
                                    {required: true, message: '来访时间'},
                                ]
                            })}*/